import React from 'react';
import './Index.css';
import { Input, Grid, Icon } from 'semantic-ui-react';
import ImageGallery from 'react-image-gallery';
import "react-image-gallery/styles/css/image-gallery.css";
import axios from 'axios';

//菜单的模板
let Menus =function(props){
    // console.log(props)
    let menulist=props.data.map(item=>{
        return(
            <Grid.Column key={item.id}>
                <div className="home-menu-item">
                    <Icon name='home' size='big'/>
                </div>
                <div>{item.menu_name}</div>
            </Grid.Column>
        );             
    })
    return (
        <div className="home-menu">
            <Grid columns={4} divided>
                <Grid.Row>
                  {menulist} 
                </Grid.Row>
            </Grid>
        </div>
    );
}

class Home extends React.Component {
    constructor (props){
        super(props)
        this.state = {
            // swiper:[
            //     {original: 'http://47.96.21.88:8086/public/1.png'},
            //     {original: 'http://47.96.21.88:8086/public/2.png'},
            //     {original: 'http://47.96.21.88:8086/public/3.png'}
            // ]
            swiper:[],
            menu:[]
        }
    }
    render(){
        //菜单的模板
        // let menulist=this.state.menu.map(item=>{
        //     return(
        //         <Grid.Column key={item.id}>
        //             <div className="home-menu-item">
        //                 <Icon name='home' size='big'/>
        //             </div>
        //             <div>菜单名称</div>
        //         </Grid.Column>
        //     );             
        // })
        // let Menus =(
        //     <div className="home-menu">
        //         <Grid columns={4} divided>
        //             <Grid.Row>
        //               {menulist} 
        //             </Grid.Row>
        //         </Grid>
        //     </div>
        // );
        return(
            <div className="home-container">
                <div className="home-topbar">
                    {/* 搜索条*/}
                    <Input fluid  icon='search' placeholder='请输入关键字...' />
                </div>
                <div className="home-content">
                    {/* 轮播图 */}
                    <ImageGallery 
                      showThumbnails={false}
                      showNav={false}
                      autoPlay={false}
                      items={this.state.swiper}/>
                    {/* 菜单数据 */}
                    <Menus data={this.state.menu}/>
                </div>
            </div>
        )
    }
    //通用接口调用方法
    queryData = (path) =>{
        return axios.post(path).then(res=>{
            return res.data.list
        })
    }




    componentDidMount(){
        //调用后台接口获取数据
        //轮播图数据
        // axios.post('homes/swipe').then(res=>{
        //     // console.log(res)
        //     //更新状态数据
        //     this.setState({
        //         swiper:res.data.list
        //     });
        // })
        let swipe = this.queryData('homes/swipe');
        //菜单数据
        // axios.post('homes/menu').then(res=>{
        //     //更新状态数据
        //     this.setState({
        //         menu:res.data.list
        //     });
        // }) 
        let menu = this.queryData('homes/menu'); 
        //promise.all方法的作用：并发触发多个异步任务，所有的任务都返回时获取到所有结果
        //promise.race方法的作用：并发触发多个异步任务，只要有一个任务返回结果，那么就触发then获取该任务结果
        Promise.all([swipe,menu]).then(ret=>{
            this.setState({
                swiper:ret[0],
                menu:ret[1]
            })
        })     
    }
}

export default Home;